<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>药品管理 - 药品识别系统</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .navbar {
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 20px rgba(0,0,0,0.1);
        }
        
        .main-container {
            margin-top: 80px;
            padding: 20px;
        }
        
        .card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.9);
        }
        
        .btn-primary {
            background: linear-gradient(45deg, #667eea, #764ba2);
            border: none;
            border-radius: 25px;
            padding: 10px 30px;
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .drug-item {
            transition: all 0.3s ease;
        }
        
        .drug-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .search-box {
            border-radius: 25px;
            border: 2px solid #e9ecef;
            padding: 10px 20px;
        }
        
        .search-box:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
        
        @media (max-width: 768px) {
            .main-container {
                margin-top: 70px;
                padding: 10px;
            }
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
        <div class="container">
            <a class="navbar-brand fw-bold" href="/">
                <i class="fas fa-pills text-primary me-2"></i>药品识别系统
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/"><i class="fas fa-home me-1"></i>首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/recognition"><i class="fas fa-camera me-1"></i>药品识别</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/history"><i class="fas fa-history me-1"></i>识别历史</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/drugs"><i class="fas fa-database me-1"></i>药品管理</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <div class="container main-container">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h4 class="mb-0">
                            <i class="fas fa-database text-primary me-2"></i>药品管理
                        </h4>
                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addDrugModal">
                            <i class="fas fa-plus me-1"></i>添加药品
                        </button>
                    </div>
                    <div class="card-body">
                        <!-- Search Bar -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <input type="text" class="form-control search-box" id="searchInput" placeholder="搜索药品名称或厂商...">
                            </div>
                            <div class="col-md-6 text-end">
                                <button class="btn btn-outline-primary" onclick="loadDrugs()">
                                    <i class="fas fa-sync me-1"></i>刷新
                                </button>
                            </div>
                        </div>
                        
                        <!-- Loading -->
                        <div id="loadingDiv" class="text-center py-4">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">加载中...</span>
                            </div>
                            <p class="mt-2 text-muted">正在加载药品数据...</p>
                        </div>
                        
                        <!-- Drugs List -->
                        <div id="drugsList">
                            <!-- 药品列表将通过JavaScript动态加载 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Drug Modal -->
    <div class="modal fade" id="addDrugModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fas fa-plus text-primary me-2"></i>添加新药品
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="addDrugForm">
                        <div class="mb-3">
                            <label for="drugName" class="form-label">药品名称 *</label>
                            <input type="text" class="form-control" id="drugName" required>
                        </div>
                        <div class="mb-3">
                            <label for="drugDescription" class="form-label">药品描述</label>
                            <textarea class="form-control" id="drugDescription" rows="3"></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="drugManufacturer" class="form-label">生产厂商</label>
                            <input type="text" class="form-control" id="drugManufacturer">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveDrug()">
                        <i class="fas fa-save me-1"></i>保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Drug Modal -->
    <div class="modal fade" id="editDrugModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fas fa-edit text-primary me-2"></i>编辑药品信息
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="editDrugForm">
                        <input type="hidden" id="editDrugId">
                        <div class="mb-3">
                            <label for="editDrugName" class="form-label">药品名称 *</label>
                            <input type="text" class="form-control" id="editDrugName" required>
                        </div>
                        <div class="mb-3">
                            <label for="editDrugDescription" class="form-label">药品描述</label>
                            <textarea class="form-control" id="editDrugDescription" rows="3"></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="editDrugManufacturer" class="form-label">生产厂商</label>
                            <input type="text" class="form-control" id="editDrugManufacturer">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="updateDrug()">
                        <i class="fas fa-save me-1"></i>更新
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <script>
        $(document).ready(function() {
            loadDrugs();
            setupSearch();
        });
        
        function loadDrugs() {
            $('#loadingDiv').show();
            $('#drugsList').empty();
            
            $.get('/api/drugs')
                .done(function(data) {
                    $('#loadingDiv').hide();
                    displayDrugs(data);
                })
                .fail(function() {
                    $('#loadingDiv').hide();
                    showAlert('加载药品数据失败！', 'danger');
                });
        }
        
        function displayDrugs(drugs) {
            const drugsList = $('#drugsList');
            
            if (drugs.length === 0) {
                drugsList.html(`
                    <div class="text-center py-5">
                        <i class="fas fa-pills fa-4x text-muted mb-3"></i>
                        <h5 class="text-muted">暂无药品数据</h5>
                        <p class="text-muted">点击"添加药品"按钮开始添加药品信息</p>
                    </div>
                `);
                return;
            }
            
            drugs.forEach(function(drug) {
                const drugItem = `
                    <div class="card drug-item mb-3">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-1 text-center">
                                    <i class="fas fa-pills fa-2x text-primary"></i>
                                </div>
                                <div class="col-md-7">
                                    <h6 class="mb-1">${drug.name}</h6>
                                    <p class="mb-1 text-muted">${drug.description || '暂无描述'}</p>
                                    <small class="text-muted">厂商：${drug.manufacturer || '未知'}</small>
                                </div>
                                <div class="col-md-4 text-end">
                                    <button class="btn btn-outline-primary btn-sm" onclick="editDrug(${drug.id})">
                                        <i class="fas fa-edit me-1"></i>编辑
                                    </button>
                                    <button class="btn btn-outline-danger btn-sm ms-1" onclick="deleteDrug(${drug.id})">
                                        <i class="fas fa-trash me-1"></i>删除
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                drugsList.append(drugItem);
            });
        }
        
        function setupSearch() {
            $('#searchInput').on('input', function() {
                const searchTerm = $(this).val().toLowerCase();
                $('.drug-item').each(function() {
                    const drugName = $(this).find('h6').text().toLowerCase();
                    const drugManufacturer = $(this).find('small').text().toLowerCase();
                    
                    if (drugName.includes(searchTerm) || drugManufacturer.includes(searchTerm)) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
            });
        }
        
        function saveDrug() {
            const drugData = {
                name: $('#drugName').val(),
                description: $('#drugDescription').val(),
                manufacturer: $('#drugManufacturer').val()
            };
            
            if (!drugData.name.trim()) {
                showAlert('请输入药品名称！', 'warning');
                return;
            }
            
            $.ajax({
                url: '/api/drugs',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(drugData),
                success: function(response) {
                    showAlert('药品添加成功！', 'success');
                    $('#addDrugModal').modal('hide');
                    $('#addDrugForm')[0].reset();
                    loadDrugs();
                },
                error: function() {
                    showAlert('添加药品失败！', 'danger');
                }
            });
        }
        
        function editDrug(id) {
            $.get(`/api/drugs/${id}`)
                .done(function(drug) {
                    $('#editDrugId').val(drug.id);
                    $('#editDrugName').val(drug.name);
                    $('#editDrugDescription').val(drug.description);
                    $('#editDrugManufacturer').val(drug.manufacturer);
                    $('#editDrugModal').modal('show');
                })
                .fail(function() {
                    showAlert('获取药品信息失败！', 'danger');
                });
        }
        
        function updateDrug() {
            const id = $('#editDrugId').val();
            const drugData = {
                name: $('#editDrugName').val(),
                description: $('#editDrugDescription').val(),
                manufacturer: $('#editDrugManufacturer').val()
            };
            
            if (!drugData.name.trim()) {
                showAlert('请输入药品名称！', 'warning');
                return;
            }
            
            $.ajax({
                url: `/api/drugs/${id}`,
                type: 'PUT',
                contentType: 'application/json',
                data: JSON.stringify(drugData),
                success: function(response) {
                    showAlert('药品更新成功！', 'success');
                    $('#editDrugModal').modal('hide');
                    loadDrugs();
                },
                error: function() {
                    showAlert('更新药品失败！', 'danger');
                }
            });
        }
        
        function deleteDrug(id) {
            if (confirm('确定要删除这个药品吗？')) {
                $.ajax({
                    url: `/api/drugs/${id}`,
                    type: 'DELETE',
                    success: function() {
                        showAlert('药品删除成功！', 'success');
                        loadDrugs();
                    },
                    error: function() {
                        showAlert('删除药品失败！', 'danger');
                    }
                });
            }
        }
        
        function showAlert(message, type = 'info') {
            const alertHtml = `
                <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                    ${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            `;
            $('.main-container').prepend(alertHtml);
            
            setTimeout(() => {
                $('.alert').alert('close');
            }, 3000);
        }
    </script>
</body>
</html>